<script setup>
	import {
		ref,
		reactive,
		toRefs,
		computed,
		onMounted,
		watch,
	} from 'vue'

	import api from '@/api/api';
	import util from '@/utils/util';
	
	import {
		useUserStore,
	} from '@/stores'
	const {
		user
	} = useUserStore();

	// 组件
	import indexBut1FormVue from './components/index-but1-form.vue';

	// img
	// import back from '@/assets/static/back.png'

	// 参数
	const pages = reactive({
		type: 1,
		api_data: {},
		info: {},
		list: [],
		total: 0,
	})

	// 挂载
	onMounted(() => {
		// 无老师身份
		if( !user.roles.includes('system:teacher') ) util.to('/home')
		// init(); // 初始化
	})
</script>

<template>
	<div class="index-but1">
		<div class="top">
			<el-breadcrumb separator="》">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<!-- <el-breadcrumb-item>
					<a href="/">promotion management</a>
				</el-breadcrumb-item> -->
				<el-breadcrumb-item>赛事申报</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="main">
			<p class="title">赛事申报</p>
			<div class="form">
				<index-but1-form-vue />
			</div>
		</div>
	</div>
</template>


<style lang="scss" scoped>
	.index-but1 {
		padding: 0 200px;
		background-color: #F7F9FB;

		.top {
			height: 80px;
			display: flex;
			align-items: center;
		}

		.main {
			background-color: white;
			padding-top: 47px;
			padding-bottom: 38px;
			margin-bottom: 40px;

			.title {
				text-align: center;
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 40px;
				color: #5173F2;
				line-height: 60px;
			}

			.form {
				width: 850px;
				margin: 0 auto;
			}
		}
	}
</style>